<template>
  <div class="notice">
    <div class="n-head">
      <div class="title">
        <i class="iconfont icon-fabu"></i>
        消息中心
      </div>
    </div>
    <div class="n-bottom">
      <div class="n-left">
        <n-menu :options="options" v-model:value="activeKey"></n-menu>
      </div>
      <div class="n-right">
        <div class="notice-head">
          <div class="notice-left">{{ title }}</div>
          <div class="notice-right">
            <div class="num">
              共{{ $store.oj.discuss.getNoticeTotal }}条消息&nbsp;
            </div>
            <a class="clear" @click="clearAll">清空</a>
          </div>
        </div>
        <router-view v-slot="{ Component }">
          <transition>
            <component :is="Component" ref="component" />
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { delAllNoticeAPI } from "@/api/ojAPI/ojAPI.js";
import { ElMessage } from "element-plus";

import { h } from "vue";
export default {
  data() {
    return {
      activeKey: "discuss",
      options: [
        {
          label: "评论我的",
          key: "discuss",
          icon: this.renderIcon("icon-pinglun1"),
        },
        {
          label: "回复我的",
          key: "reply",
          icon: this.renderIcon("icon-huifu"),
        },
        {
          label: "收到的赞",
          key: "like",
          icon: this.renderIcon("icon-shoudaodezanheshoucang"),
        },
        {
          label: "系统通知",
          key: "sys",
          icon: this.renderIcon("icon-xitongtongzhi"),
        },
        {
          label: "我的消息",
          key: "mine",
          icon: this.renderIcon("icon-wodexiaoxi"),
        },
      ],
      clearTime: null,
    };
  },
  computed: {
    title() {
      switch (this.$route.path) {
        case "/home/notice/discuss":
          return "评论我的";
          break;
        case "/home/notice/reply":
          return "回复我的";
          break;
        case "/home/notice/like":
          return "收到的赞";
          break;
        case "/home/notice/sys":
          return "系统通知";
          break;
        case "/home/notice/mine":
          return "我的消息";
          break;
      }
    },
  },
  methods: {
    renderIcon(icon) {
      return () => h("i", { class: ["iconfont", icon] }, "");
    },
    clearAll() {
      if (this.$store.oj.discuss.getNoticeTotal === "0") {
        ElMessage.warning("暂无消息无法清空");
        return;
      }
      if (this.clearTime) {
        clearTimeout(this.clearTime);
      }
      this.clearTime = setTimeout(() => {
        this.clearNoticeAll();
      }, 300);
    },
    async clearNoticeAll() {
      let data = new FormData();
      if (this.$route.path === "/home/notice/like") {
        data.append("type", 2);
        await delAllNoticeAPI(data).then((res) => {
          if (res.data.code === 200) {
            this.$refs.component.getLikeAPI();
          }
        });
      } else if (this.$route.path === "/home/notice/discuss") {
        data.append("type", 0);
        await delAllNoticeAPI(data).then((res) => {
          if (res.data.code === 200) {
            this.$refs.component.getCommentMeAPI();
          }
        });
      } else if (this.$route.path === "/home/notice/reply") {
        data.append("type", 1);
        await delAllNoticeAPI(data).then((res) => {
          if (res.data.code === 200) {
            this.$refs.component.getReplyMeAPI();
          }
        });
      } else if (this.$route.path === "/home/notice/sys") {
        data.append("type", 3);
        await delAllNoticeAPI(data).then((res) => {
          if (res.data.code === 200) {
            this.$refs.component.getNoticeMeAPI();
          }
        });
      } else if (this.$route.path === "/home/notice/mine") {
        data.append("type", 4);
        await delAllNoticeAPI(data).then((res) => {
          if (res.data.code === 200) {
            this.$refs.component.getMineMeAPI();
          }
        });
      }
    },
  },
  watch: {
    activeKey: function (newV) {
      this.$router.push({
        path: `/home/notice/${newV}`,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.notice {
  width: 85%;
  min-height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  .n-head {
    width: 85%;
    height: 36px;
    background: linear-gradient(
      to right,
      rgba(140, 218, 233, 0.7),
      rgba(86, 183, 203, 0.7),
      rgba(86, 203, 182, 0.8),
      rgba(86, 203, 107, 0.9)
    );
    margin: 0 auto;
    border-radius: 10px;
    margin-bottom: 5px;
    box-shadow: 0 1px 2px rgba(0, 10, 32, 0.1), 0 2px 8px rgba(0, 10, 32, 0.05);
    transition: box-shadow 0.3s ease-in-out 0s;
    .title {
      display: flex;
      height: 36px;
      text-align: center;
      color: #fff;
      font-size: 1.24em;
      justify-content: center;
      align-items: center;

      i {
        font-size: 1.1em;
        align-items: center;
      }
    }
  }
  .n-bottom {
    margin: 0 auto;
    display: flex;
    width: 85%;
    min-height: 100%;
    .n-left {
      width: 18%;
      min-height: 600px;
      background-color: #fff;
      border-radius: 10px;
      padding: 10px 0;
      box-shadow: 0 1px 2px rgba(0, 10, 32, 0.1),
        0 2px 8px rgba(0, 10, 32, 0.05);
      transition: box-shadow 0.3s ease-in-out 0s;
    }

    .n-right {
      width: 80%;
      min-height: 600px;
      margin-left: 10px;
      background-color: #fff;
      border-radius: 10px;
      padding: 10px;
      box-shadow: 0 1px 2px rgba(0, 10, 32, 0.1),
        0 2px 8px rgba(0, 10, 32, 0.05);
      transition: box-shadow 0.3s ease-in-out 0s;
      .notice-head {
        height: 35px;
        border-bottom: 3px solid #eff3f5;
        display: flex;
        justify-content: space-between;
        .notice-left {
          align-items: center;
          margin-left: 10px;
          font-size: 1.2em;
          color: #9d9797;
        }
        .notice-right {
          display: flex;
          .num {
            align-items: center;
            font-size: 1em;
            color: #9d9797;
          }
          a {
            cursor: pointer;
            color: #18a058;
          }
          a:hover {
            color: #d03050;
          }
        }
      }
    }
  }
}

::v-deep(.n-menu-item-content-header) {
  color: #999 !important;
  font-size: 16px !important;
  font-weight: 550 !important;
}
</style>
